import QtQuick 1.0
import "alchemix.js" as Alchemix
//import "tree.js" as Tree

Rectangle {
    id: screen
    width: 720
    height: 490

    SystemPalette { id: activePalette }

    ListModel {
        id: evoTree

        ListElement {
            name: "water"
            title: "Water"
            group: "Basic"
            formula: ""
        }
        ListElement {
            name: "air"
            title: "Air"
            group: "Basic"
            formula: ""
        }
        ListElement {
            name: "fire"
            title: "Fire"
            group: "Basic"
            formula: ""
        }
        ListElement {
            name: "earth"
            title: "Earth"
            group: "Basic"
            formula: ""
        }
    }

    Rectangle {
        id: toolbar
        z: 10
        width: parent.width
        height: 40
        color: activePalette.window
        smooth: false
        anchors.bottom: parent.bottom

        Button {
            text: "New Game"
            anchors { left : parent.left; verticalCenter: parent.verticalCenter}
            //onClicked: Alchemix.startGame();

        }
    }

    Rectangle {
        id: componentsPalette
        z: 8
        width: 150
        color: "#ffffff"
        anchors.bottom: toolbar.top
        anchors.top: screen.top
        anchors.left: screen.left

        GridView {
            id: componentsList
            /*
            FIX LATER: remove margins from delegates and insert them
            as GridView flickable margins */
            anchors.fill: parent
            model: evoTree
            cellWidth: 60
            cellHeight: 60
            delegate:
            BasicElement{
                text: model.name
                height: 60
                width: 60
            }
        }
    }

    Item {
        id: field
        anchors.bottom: toolbar.top
        anchors.top: screen.top
        anchors.left: componentsPalette.right
        anchors.right: screen.right

        Image {
            id: background
            anchors.fill: parent
            fillMode: Image.PreserveAspectCrop
            source: "../img/background.jpg"
        }
    }
}
